<template>
  <div class='web-bottom'>
    <div class="bottom_hide_offer_btn" id="hide_offer_btn"  style="background: rgba(0, 0, 0, 0.85098); height: 150px; position: fixed; bottom: -1px; z-index: 9998; width: 100%; left: 0px; display: block;">
      <div style="width:1320px;text-align: left;height: 253px;margin:auto;margin-top:-104px;overflow: hidden;">
        <div style="height:253px;width:221px;float:left"><img src="http://www.shjhome.com/assets/images/man.png" alt=""></div>
        <div style="width:1058px;float:left;height:180px;margin-top: 90px;overflow: hidden;margin-left:40px;">
          <form action="" id="testForm">
          <div style="width:463px;margin-top: 45px;float:left">
              <input type="text" name="name" placeholder="您的称呼" style="width:240px;height:40px;border:none;padding-left: 17px;box-sizing: border-box;">
              <input type="text" name="area" placeholder="您家套内面积" style="width:200px;height:40px;float: right;border:none;padding-left: 17px;box-sizing: border-box;">
              <input type="text" name="phoneNo" placeholder="您的手机号" style="width:240px;height:40px;border:none;margin-top:11px;padding-left: 17px;box-sizing: border-box;">
              <input type="text" name="yzCode" placeholder="验证码" style="margin-left:18px;width:98px;height:40px;border:none;margin-top:11px;padding-left: 17px;box-sizing: border-box;">
              <img class="yzcode" src="http://www.shjhome.com/jcaptcha.action" onclick="this.src=this.src+'?'+Math.random()" title="看不清？换一张">
              <input name="bedRoomCnt" value="2" type="hidden">
              <input name="livingRoomCnt" value="2" type="hidden">
              <input name="bathRoomCnt" value="1" type="hidden">
              <input type="hidden" name="style" value="现代简约">
              <input name="city" value="2" type="hidden">
              <input name="product" value="carryPackage" type="hidden">
              <input name="orignURL" type="hidden">
              <input name="price" type="hidden" value="">
          </div>
           <div style="float:left;position: relative;margin-left: 40px;width: 540px;margin-top: 45px;">
              <img src="http://www.shjhome.com/assets/images/woyaobaojia.png" alt="" style="cursor: pointer;width:218px;height:91px" onclick="checkForm(this)">
               <p style="font-size:35px;color:#fff;font-size: 35px;margin-top: auto;color: #fff;position: absolute;left: 259px;top: 0px;">已有<i style="font-size:56px;color:#f48000;font-style:normal;font-weight:bold" id="calcpriceApplyNum">76202</i>人</p>
               <p style="font-size:22px;color:#fff;left: 321px;position: absolute;margin-top: -20px;">使用免费报价</p>
           </div>
          </form>
        </div>
        <img class="footer_close_btn" v-on:click="onEndAnimation()" src="http://www.shjhome.com/assets/images/footer_close_btn.png" alt="" style="position: absolute;top: 30px;vertical-align: top;cursor: pointer;">
      </div>
    </div>
    <div class="bottom_show_offer_btn" id="show_offer_btn" v-on:click="onStartAnimation()">
      <img src="http://www.shjhome.com/assets/images/footer_show_btn.png" alt="" style="cursor: pointer;">
    </div>
    <div class='bottom-help-div'>
      <div class='bottom-help-div-ljcp'>
        <a class='bottom-help-div-title' target="_blank" herf="http://www.baidu.com">了解产品</a>
        <a target="_blank" herf="http://www.baidu.com">轻奢装</a>
        <a target="_blank" herf="http://www.baidu.com">拎包装</a>
      </div>
      <div class='bottom-help-div-ljcp'>
        <a class='bottom-help-div-title' target="_blank" herf="http://www.baidu.com">案例精选</a>
        <a target="_blank" herf="http://www.baidu.com">VR全景图</a>
        <a target="_blank" herf="http://www.baidu.com">旧房改造</a>
        <a target="_blank" herf="http://www.baidu.com">团装小区</a>
        <a target="_blank" herf="http://www.baidu.com">预约装修</a>
      </div>
      <div class='bottom-help-div-ljcp'>
        <a class='bottom-help-div-title' target="_blank" herf="http://www.baidu.com">工程管理</a>
        <a target="_blank" herf="http://www.baidu.com">德标工程</a>
        <a target="_blank" herf="http://www.baidu.com">欧洲寻材</a>
        <a target="_blank" herf="http://www.baidu.com">工地直播</a>
        <a target="_blank" herf="http://www.baidu.com">仓储体系</a>
      </div>
      <div class='bottom-help-div-ljcp'>
        <a class='bottom-help-div-title' target="_blank" herf="http://www.baidu.com">设计团队</a>
        <a target="_blank" herf="http://www.baidu.com">1V1定制</a>
        <a target="_blank" herf="http://www.baidu.com">预约设计</a>
      </div>
      <div class='bottom-help-div-ljcp'>
        <a class='bottom-help-div-title' target="_blank" herf="http://www.baidu.com">关于我们</a>
        <a target="_blank" herf="http://www.baidu.com">联系我们</a>
        <a target="_blank" herf="http://www.baidu.com">品牌实力</a>
        <a target="_blank" herf="http://www.baidu.com">官方论坛</a>
        <a target="_blank" herf="http://www.baidu.com">公司动态</a>
      </div>
      <img class="bottom-help-div-img1" src="http://www.shjhome.com/assets/images/footer_erweima.png">
      <img class="bottom-help-div-img2"  src="http://www.shjhome.com/assets/images/footer_bottom_2.png">
      <div class="bottom-help-div-phone">
        <img src="http://www.shjhome.com/assets/images/footer_bottom_1.png">
        <p class="bottom-help-div-phone-call1">1001-110-120</p>
        <p class="bottom-help-div-phone-call2">全国工程投诉电话 1001-110-119</p>
      </div>
    </div>
    <div class="bottom-help-friendly-link">
      <span class="bottom-help-div-title">友情链接</span><br/>
      <a class="bottom-help-friendly-link-a" target="_blank" herf="http://www.baidu.com">百度</a>
      <a class="bottom-help-friendly-link-a" target="_blank" herf="http://www.sjqcj.com">水晶球财经</a>
    </div>
    <div class="bottom-help-copyright">
      <p>设计好·让我更懂你 版权所有：我的家家居装饰有限公司  蜀ICP备10000000号-0</p>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default{
  data () {
    return {}
  },
  components: {},
  methods: {
    onStartAnimation () {
      $('#show_offer_btn').css('animation', 'showoffer 1s')
      $('#show_offer_btn').css('-webkit-animation', 'showoffer 1s') /* Safari and Chrome */
      $('#show_offer_btn').css('-moz-animation', 'showoffer 1s') /* Firefox */
      $('#show_offer_btn').css('-o-animation', 'showoffer 1s') /* Opera */
      $('#show_offer_btn').css('animation-fill-mode', 'forwards')

      $('#hide_offer_btn').css('animation', 'heidoffercontent 2s')
      $('#hide_offer_btn').css('-webkit-animation', 'heidoffercontent 2s') /* Safari and Chrome */
      $('#hide_offer_btn').css('-moz-animation', 'heidoffercontent 2s') /* Firefox */
      $('#hide_offer_btn').css('-o-animation', 'heidoffercontent 2s') /* Opera */
      $('#hide_offer_btn').css('animation-fill-mode', 'forwards')

      $('#hide_offer_btn').css('animation-delay', '1s') /* 设置动画2s后执行 */
      $('#hide_offer_btn').css('-webkit-animation-delay', '1s') /* Safari and Chrome */
      $('#hide_offer_btn').css('-moz-animation-delay', '1s') /* Firefox */
      $('#hide_offer_btn').css('-o-animation-delay', '1s') /* Opera */
    },
    onEndAnimation () {
      $('#show_offer_btn').css('animation', 'heidoffer 1s')
      $('#show_offer_btn').css('-webkit-animation', 'heidoffer 1s') /* Safari and Chrome */
      $('#show_offer_btn').css('-moz-animation', 'heidoffer 1s') /* Firefox */
      $('#show_offer_btn').css('-o-animation', 'heidoffer 1s') /* Opera */
      $('#show_offer_btn').css('animation-fill-mode', 'forwards')

      $('#hide_offer_btn').css('left', '-1600px')
      $('#hide_offer_btn').css('animation', 'showoffercontent 2s')
      $('#hide_offer_btn').css('-webkit-animation', 'showoffercontent 2s') /* Safari and Chrome */
      $('#hide_offer_btn').css('-moz-animation', 'showoffercontent 2s') /* Firefox */
      $('#hide_offer_btn').css('-o-animation', 'showoffercontent 2s') /* Opera */
      $('#hide_offer_btn').css('animation-fill-mode', 'forwards')

      $('#show_offer_btn').css('animation-delay', '2s') /* 设置动画2s后执行 */
      $('#show_offer_btn').css('-webkit-animation-delay', '2s') /* Safari and Chrome */
      $('#show_offer_btn').css('-moz-animation-delay', '2s') /* Firefox */
      $('#show_offer_btn').css('-o-animation-delay', '2s') /* Opera */
    }
  }
}
</script>

<style>
a:hover{
  text-decoration:underline;
  cursor: pointer;
}
.web-bottom{
  height: 330px;
  padding-top: 40px;
  width: 100%;
  background: url('../assets/img/footerBg.jpg');
}
.bottom-help-div{
  width: 1200px;
  padding-left: 40px;
}
.bottom-help-div a{
  display: block;
  margin-bottom: 2px;
  line-height: 20px;
  vertical-align: top;
  text-align: left;
}
.bottom-help-div-ljcp{
  width: 60px;
  vertical-align: top;
  margin-right: 35px;
  display: inline-block;
  color: #b6b6b6;
  font-size: 12px;
}
.bottom-help-div-title{
  color: white;
  font-size: 14px;
}
.bottom-help-div-img1{
  width: 100px;
  margin-left: 30px;
}
.bottom-help-div-img2{
  width: 100px;
  margin-left: 40px;
}
.bottom-help-div-phone{
  display: inline-block;
  vertical-align: top;
  width: 265px;
  margin-left: 65px;
}
.bottom-help-div-phone-call1{
  font-weight: bold;
  font-size: 30px;
  color: #84c225;
  margin:10px auto;
  text-align: center;
}
.bottom-help-div-phone-call2{
  font-weight: bold;
  font-size: 15px;
  color: #8f8f8f;
  text-align: center;
}
.bottom-help-friendly-link{
  margin-left: 60px;
  margin-top: 60px;
  text-align: left;
}
.bottom-help-friendly-link-a{
  color: #b6b6b6;
  font-size: 12px;
  margin-right: 10px;
  margin-top: 7px;
}
.bottom-help-copyright{
  margin-top: 40px;
  margin-right: 60px;
  margin-left: 60px;
  border-top: 1px solid #999;
  text-align: center;
  padding-top: 15px;
  color: #cfcfcf;
  font-size: 12px;
}
.yzcode{
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 35px;
}

.bottom_show_offer_btn{
  position: fixed;
  bottom: 80px;
  left: -169px;
  display: block;
}
@keyframes showoffer
{
  from {left:0;}
  to {left:-169px;}
}
@keyframes heidoffer
{
  from {left:-169px;}
  to {left:0;}
}
@keyframes showoffercontent
{
  from {left:0;}
  to {left:-1600px;}
}
@keyframes heidoffercontent
{
  from {left:-1600px;}
  to {left:0;}
}
</style>
